<template>
  <div class="form-datetime">
    <!-- <bbx-timezone-time-picker
      :value="bindTime"
      :is-edit="true"
      :type="type"
      :format="format"
      value-format="timestamp"
      @confirm="choose"
    >
      <template picker>
        <el-date-picker
          :id="`form_${field.fieldName}`"
          :type="type"
          :prefix-icon="`iconfont icon-fdn-${type}`"
          :picker-options="pickerOptions"
          :format="format"
          value-format="timestamp"
          :placeholder="placeholder"
          :value="bindTime" 
          :clearable="clearable" 
          :default-time="defaultTime"
          @input="choose"
          popper-class="bbx-plan-time-picker"
        />
      </template>
    </bbx-timezone-time-picker> -->
    <form-date 
      v-bind="$props"
      :field="currentField"
      :default-time="defaultTime"
      :disabled-date="pickerOptions.disabledDate"
      popper-class="bbx-plan-time-picker"
      only-native-event
      @nativeConfirm="choose"
      @nativeChange="choose($event, true)" 
      @nativeInput="choose" />
  </div>
</template>

<script>
import { defineComponent, ref, unref, computed, watchEffect } from 'vue';
/* utils */
import FormMixin from '@src/component/form/mixin/form';
import { getTimestamp, getPlanStartTime } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { cloneDeep } from 'lodash';

export default defineComponent({
  name: 'FormPlantime',
  mixins: [FormMixin],
  props: {
    pickerOptions: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: [String, Number],
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  emits: ['input', 'update'],
  setup(props, { emit }){
    const currentField = ref(cloneDeep(props.field))
    const type = computed(() => props.field?.setting?.dateType === 'date' ? 'date' : 'datetime')
    const isDateTime = computed(() => type.value === 'datetime')
    const format = computed(() => unref(isDateTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd')
    const defaultTime = computed(() =>{
      return getPlanStartTime(safeNewDate(), 'task').split(' ')[1]
    })
    const bindTime = ref(null)
    const isDateHour = computed(() => Boolean(props.field?.setting?.isDateHour))
    
    watchEffect(() => {
      bindTime.value = props.value ? getTimestamp(props.value) : null
    })

    function choose(newValue){
      
      // 如果是年月日小时, 并且时间是当前时间小时，则默认加1小时
      if (isDateHour.value) {
        const date = new Date(newValue)
        const now = new Date()
        const isSameYear = date.getFullYear() === now.getFullYear()
        const isSameMonth = date.getMonth() === now.getMonth()
        const isSameDate = date.getDate() === now.getDate()
        const isSameHour = date.getHours() === now.getHours()
        if (isSameYear && isSameMonth && isSameDate && isSameHour) {
          date.setHours(date.getHours() + 1)
          newValue = date.getTime()
        }
      }
      
      const {value: oldValue, field} = props
      const upData = {
        newValue,
        oldValue,
        field
      }
      emit('update', upData);
      emit('input', newValue);
    }

    if(isDateTime.value) {
      currentField.value.setting.dateType = 'yyyy-MM-dd HH:mm'
    }


    return {
      currentField,
      type,
      isDateTime,
      format,
      bindTime,
      defaultTime,
      choose,
    }
  },
});
</script>

<style lang="scss">
.form-datetime{
  width: 100%;

  .el-input__inner {
    cursor: pointer;
  }

  .el-date-editor{
    width: 100%;
  }
}

.body-for-plantime {
  .el-date-picker {
    .el-picker-panel__footer {
      button:nth-child(1) {
        display: none;
      }
    }
    .el-time-spinner {
      .el-time-spinner__wrapper {
        width: 50%;
        &:last-child {
          display: none;
        }
      }
    }
  }
}
</style>
